HTML-Exemplos de Menus 3 - Horizontal - Sólido

Hoje em dia com as ferramentas que nos auxiliam ficou fácil e prático fazer um menu utilizando seus recursos.

Para construção de menus um dos melhores recursos é o BootStrap e como ele é um padrão, responsivo e só tem vantagens a gente costuma muito usar ele para fazer esses menus mas sempre é bom saber o que dá pra fazer com a ferramenta pura.

Como recursos básicos de um Menu simples diria que são :
1-Indicação de que página nos encontramos do menu.
2-No mouse over mudar a cor de fundo.
3-O estilo dos itens devem ser completamente customizáveis para o que desejamos fazer.

Este é um dos padrões mais usados na web. Um menu horizontal e, normalmente, perto do cabeçalho da página. É um padrão feito se comparado ao bootstrap mas muito prático.




Este menu é feito com puro html e CSS. Nada de JavaScript. Todos os itens são personalizaveis e este é o grande motivo de usar esses menus, muito simples de utilizar, personalizar, etc.

Este menu é o mais simples e, a meu ver, o mais feio mas é feito totalmente com tecnologia da web 1.0.

Código - estilos

<style>

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 650px;
            float: left; /*exibição do fundo da ul*/
        }

            ul li {
                float: left; /*coloca o menu na horizontal*/
                margin:1px; /*magem entre os itens li e a borda da ul*/
                padding:1px;
            }

            ul a {
                display: block;
                padding: 0 2em;
                line-height: 2em;
                text-decoration: none;
                color: #fff;
            }

            ul .primeiro a {
                background: none;
            }

            ul a:hover {
                color: #085662;
                background: #44cade;
            }

        #home #navegacao .home a, #sobre #navegacao .sobre a {
            color: #085662;
            background: #44cade;
        }

        #navegacao {
            display:table;
            margin-left:25%;
            background-color:#085662;
        }
    </style>

Código - HTML

<ul id="navegacao">
            <li class="home primeiro"><a href="#">Home</a></li>
            <li class="sobre"><a href="#">Sobre</a></li>
            <li class="servicos"><a href="#">Serviços</a></li>
            <li class="noticias"><a href="#">Notícias</a></li>
            <li class="contato"><a href="#">Contato</a></li>
        </ul>